<template>
  <div class="root base-background-img">
    <div class="home">
      <router-link to="/">
        <img src="~@/assets/ar/common/home.png">
      </router-link>
    </div>
    <div class="back">
      <router-link to="/">
        <img src="~@/assets/ar/common/back.png">
      </router-link>
    </div>
    <div class="left">
      <img @click="toggleTabs('dec')" src="~@/assets/images/common/left.png">
    </div>
    <div class="right">
      <img @click="toggleTabs('add')" src="~@/assets/images/common/right.png">
    </div>
    <component :is="currentView" keep-alive></component>
  </div>
</template>

<script>
  import wemo1 from './wemo1'
  import wemo2 from './wemo2'
  export default {
    name: 'ar',
    data () {
      return {
        currentIndex: 1,
        currentView: 'wemo-wemo1'
      }
    },
    components: {
      'wemo-wemo1': wemo1,
      'wemo-wemo2': wemo2
    },
    created () {
      let that = this
      console.log('base created')
      console.log(that.$route.query.compoent)
      if (that.$route.query.compoent === '') {
        that.currentView = 'wemo-wemo1'
      } else if (that.$route.query.compoent !== undefined) {
        // 传入参数时修改
        that.currentView = that.$route.query.compoent
        this.currentIndex = parseInt(that.$route.query.compoent.substr(-1))
      }
    },
    methods: {
      toggleTabs: function (func) {
        if (func === 'add') {
          if (this.currentView !== 'wemo-wemo2') {
            this.currentIndex = this.currentIndex + 1
            this.currentView = 'wemo-wemo' + this.currentIndex
          }
        } else {
          if (this.currentView !== 'wemo-wemo1') {
            this.currentIndex = this.currentIndex - 1
            this.currentView = 'wemo-wemo' + this.currentIndex
          }
        }
      }
    }
  }
</script>

<style scoped>
.root {
  background: url('~@/assets/wemo/bg.png');
  width: 1280px;
  height: 720px;
  position: absolute;
  margin: 0;
  overflow: hidden;
}
.root > div {
  position: absolute; 
}
.root > div {
  position: absolute; 
}
.home {
  top: 54px;
  left: 57px;
  z-index: 10;
}
.back {
  top: 153px;
  left: 57px;
  z-index: 10;
}
.left {
  z-index: 10;
  top: 330px;
  left: 118px;
}
.right {
  z-index: 10;
  top: 330px;
  left: 1135px;
}
</style>
